<template>
  <div class="app-container">
    <!-- 车辆监控数据查看 -->
    <el-card shadow="never">
      <el-tabs v-model="activeTab" class="custom-tabs">
        <el-tab-pane label="地图视图" name="map">
          <div class="bg-white rounded-lg shadow-sm">
            <div ref="mapContainer" class="w-full h-[800px]">
              <div v-if="!vehicles" class="w-full h-full flex items-center justify-center">
                <!-- 车辆异常 -->

                <el-text>车辆异常</el-text>
              </div>

              <Map v-else driverList="all" v-if="activeTab == 'map'" />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="列表视图" name="list">
          <div>
            <el-form ref="queryFormRef" :model="searchForm" :inline="true">
              <el-form-item label="车牌号" prop="code">
                <el-select
                  v-model="searchForm.vehicleId"
                  placeholder="请选择车牌号"
                  class="!w-[192px]"
                  clearable
                  @change="handleQuery"
                >
                  <el-option
                    v-for="item in plateList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="锁状态" prop="productCode">
                <el-select
                  v-model="searchForm.lockStatus"
                  placeholder="锁状态"
                  class="!w-[192px]"
                  @change="handleQuery"
                  clearable
                >
                  <el-option label="开启" :value="1" />
                  <el-option label="关闭" :value="0" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="search" @click="handleQuery">查询</el-button>
                <el-button icon="refresh" @click="handleReset">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <el-table v-loading="loading" :data="vehicles">
            <el-table-column prop="vehicleId" label="车牌号" align="center">
              <template #default="{ row }">
                <el-link type="primary" @click="showCarLocation(row)">
                  {{ row.vehicleId }}
                </el-link>
              </template>
            </el-table-column>
            <el-table-column prop="currentLocation" label="当前位置" align="center">
              <template #default="{ row }">{{ row.latitude }},{{ row.longitude }}</template>
            </el-table-column>
            <el-table-column label="温度" align="center">
              <template #default="{ row }">
                <el-tag :type="'success'">
                  {{ row.temperature ? `${row.temperature}°C` : "-" }}
                </el-tag>
              </template>
            </el-table-column>

            <el-table-column label="锁状态" align="center">
              <template #default="{ row }">
                <el-tag :type="row.lockStatus === '1' ? 'success' : 'warning'">
                  {{ row.lockStatus === "1" ? "开启" : "关闭" }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
          <!-- <pagination
            v-if="total > 0"
            v-model:total="total"
            v-model:page="searchForm.pageNum"
            v-model:limit="searchForm.pageSize"
            @pagination="handleQuery"
          /> -->
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-dialog v-model="showMap" title="车辆位置" width="600">
      <div v-if="selectedDriver" class="flex items-center justify-between mb-4">
        <el-text>车牌号：{{ selectedDriver.vehicleId }}</el-text>
        <el-text>车速：{{ selectedDriver.speed }}km/h</el-text>
        <el-text>温度：{{ selectedDriver.temperature }}°C</el-text>

        <!-- <el-statistic :value="vehicleInfo.speed">
          <template #prefix>车速：</template>
          <template #suffix>km/h</template>
        </el-statistic>
        <el-statistic :value="vehicleInfo.temperature">
          <template #prefix>温度：</template>
          <template #suffix>°C</template>
        </el-statistic> -->
      </div>
      <Map :driver="selectedDriver" v-if="showMap" @getDriverInfo="handleGetDriverInfo" />
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { VehicleMonitoringData } from "@/api/LogisticsManagement/vehicleMonitoringData";
import { ref } from "vue";
import Map from "@/components/Map/index.vue";
import vehicleSchedulingApi, {
  VehicleMonitoringQuery,
  VehicleMonitoringResult,
} from "@/api/LogisticsManagement/vehicleScheduling";

const activeTab = ref("map");
const queryFormRef = ref();
const showMap = ref(false);
const selectedDriver = ref<VehicleMonitoringData & { targetName: string; vehicleId: string }>({
  id: NaN,
  licensePlate: "",
  coordinates: "",
  monitorStatus: "",
  duration: "",
  speed: 0,
  lockStatus: 1,
  temperature: 0,
  currentLocation: "",
  targetName: "",
  vehicleId: "",
});
const loading = ref(false);
const total = ref(0);
const mapContainer = ref<HTMLElement | null>(null);

const searchForm = ref<VehicleMonitoringQuery>({
  vehicleId: undefined,
  temperature: undefined,
  lockStatus: undefined,
});

const plateList = ref();

const vehicles = ref<VehicleMonitoringResult[]>([]);

//车速，锁状态，温度
const vehicleInfo = ref<VehicleMonitoringData & { targetName?: string; currentName?: string }>({
  id: NaN,
  licensePlate: "",
  coordinates: "",
  monitorStatus: "",
  duration: "",
  speed: 0,
  lockStatus: 1,
  temperature: 0,
  currentLocation: "",
  targetName: "",
  currentName: "",
});
const handleGetDriverInfo = (
  driverInfo: VehicleMonitoringData & { targetName?: string; currentName?: string }
) => {
  //地图组件返回的车辆信息
  vehicleInfo.value = driverInfo;
};

//显示车辆位置
const showCarLocation = (row: VehicleMonitoringResult & { targetName: string }) => {
  showMap.value = true;
  row.targetName = "";

  selectedDriver.value = row as any as VehicleMonitoringData & {
    targetName: string;
    vehicleId: string;
  };
  selectedDriver.value.licensePlate = row.vehicleId;
};

const handleQuery = () => {
  // 实际项目中这里会调用接口
  vehicleSchedulingApi.queryVehicleInfo(searchForm.value).then((res: any) => {
    console.log(res.list, "res.list");

    vehicles.value = res;
    plateList.value = res.map((item: any) => {
      return {
        label: item.vehicleId,
        value: item.vehicleId,
      };
    });
    // total.value = res.total;
  });
  console.log("查询条件:", searchForm.value);
};

const handleReset = () => {
  searchForm.value.lockStatus = "";
  searchForm.value.vehicleId = "";
  searchForm.value.temperature = "";
  queryFormRef.value.resetFields();
};

onMounted(() => {
  handleQuery();
});
onUnmounted(() => {});
</script>

<style scoped></style>
